<template>
  <div>
    <el-dialog title="设置" width="30%" v-model="visible" v-loading="loading">
      <el-form label-width="80px" v-loading="loading">
        <el-form-item label="预览方式">
          <div class="mt-6">
            <el-radio-group v-model="form.previewMode">
              <el-radio label="1">模拟环境</el-radio>
              <el-radio label="2">新开页面</el-radio>
            </el-radio-group>
          </div>
          <p>模拟环境将在系统模拟手机尺寸下查看;新开页面将在网页端打开</p>
        </el-form-item>
        <el-form-item label="评论设置">
          <div class="mt-6">
            <div>
              <p class="text-[#999999] text-[12px]">保存后该设置将会同步到您所属下的所有商品</p>
              <p>评论时间格式</p>
              <el-select v-model="form.timeFormat">
                <el-option label="精确到日期:2024-01-01" value="1" />
                <el-option label="精确到秒:2024-01-01 13:14:00" value="2" />
              </el-select>
            </div>
            <div class="mt-4">
              <p>评论时间显示规则</p>
              <el-radio-group v-model="form.timeRule" style="display: block !important">
                <div>
                  <el-radio label="1"> 按设定时间 </el-radio>
                  <p class="text-[#999] text-[12px]">按原有添加/导入的评论时间显示</p>
                </div>
                <div>
                  <el-radio label="2"> 系统随机生成 </el-radio>
                  <p class="text-[#999] text-[12px]">评论时间将随机显示近期时间</p>
                  <el-select class="mt-2" v-if="form.timeRule === '2'" v-model="form.timeRule">
                    <el-option label="时间范围为最近7天随机时间" value="2" />
                  </el-select>
                </div>
              </el-radio-group>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer el-dia-btn">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" color="#3721FF" @click="submit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ProductApi } from '@/api/product/addProduct'
const emit = defineEmits(['getSet'])
const visible = ref(false)
const loading = ref(false)
const form = reactive({
  id: '',
  previewMode: '1',
  timeFormat: '1',
  timeRule: '1'
})
const handleGetSet = async () => {
  loading.value = true
  await ProductApi.getSet().then((res) => {
    form.id = res.id
    form.previewMode = res.previewMode.toString()
    form.timeFormat = res.timeFormat.toString()
    form.timeRule = res.timeRule.toString()
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
  emit('getSet', form)
}

const submit = () => {
  if (form.id) {
    handleUpdateSet()
  } else {
    handleCreateSet()
  }
}
const handleUpdateSet = async () => {
  await ProductApi.updateSet(form).then(() => {
    visible.value = false
    ElMessage.success('设置成功')
  })
}
const handleCreateSet = async () => {
  await ProductApi.createSet(form).then(() => {
    visible.value = false
    ElMessage.success('设置成功')
  })
}
const show = () => {
  visible.value = true
  handleGetSet()
}
const hide = () => {
  visible.value = false
}
onMounted(() => {
  handleGetSet()
})
defineExpose({
  show,
  hide,
  handleGetSet
})
</script>

<style scoped>
@import '@/styles/website.scss';
</style>
